<template>
	<view class="otherLogin">
		<view class="loginBox">
			<u-form ref="uForm" label-width="140" :model="form">
				<u-form-item left-icon="phone" label="手机号" prop="newPhone">
					<u-input v-model="form.newPhone" />
				</u-form-item>
				<u-form-item left-icon="lock" label="验证码" prop="authCode">
					<slot name="right">
						<view class="authCodeBtn">
							<u-input class="u-input" v-model="form.authCode" />
							<text @click="getAuthCode">{{tips}}</text>
							<u-verification-code @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
						</view>
					</slot>
				</u-form-item>
			</u-form>
		</view>
		<view class="submit">
			<u-button ripple type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import { get, set } from '../../utils/storage'
	import { isMobile } from '../../utils/verify'
	
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				tips: '获取验证码',
				form: {
					newPhone: '',
					authCode: ''
				},
				rules: {
					newPhone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['blur']
						},
						{
							validator: (rule, value, callback) => this.$u.test.mobile(value),
							message: '手机号码不正确',
							trigger: ['blur']
						}
					],
					authCode: [
						{
							required: true,
							message: '请输入验证码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => this.$u.test.code(value, 6),
							message: '验证码不正确',
							trigger: ['blur']
						}
					]
				}
			}
		},
		computed: {
			...mapState(['phone', 'code']),
			openId() { return get('openId') }
		},
		methods: {
			...mapMutations(['login']),
			end() {
				this.tips = '重新获取'
			},
			start() {
				this.tips = '倒计时开始'
			},
			codeChange(text) {
				this.tips = text
			},
			validate() {
				return new Promise((resolve, reject) => {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							resolve(true)
						} else {
							resolve(false)
						}
					})
				})
			},
			async submit() {
				// 表单基本校验
				const validate = await this.validate()
				if (!validate) {
					return
				}
				
				// 检查手机号 - 已被注册
				const checkPhone = await this.checkPhone()
				if (!checkPhone) {
					return
				}
				
				// 短信验证码校验
				const verify = await this.$http.post('/tecent/sms/verify', {
					phone: this.form.newPhone,
					code: this.form.authCode
				}).then(res => res).catch(_ => false)
				
				// 验证不通过
				if (verify.code == 1) {
					return
				}
				
				// 后端登录
				const userInfo = await this.$http.post('/tecent/code', {
					code: this.code,
					phone: this.form.newPhone
				}).then(res => res.data)
				set('openId', userInfo.openId)
				this.login(userInfo)
				
				// 跳转首页
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			async getAuthCode() {
				// 检查手机号
				const checkPhone = await this.checkPhone()
				if (!checkPhone) {
					return
				}
				
				// 发送验证码
				this.$http.post('/tecent/sms', {
					phone: this.form.newPhone
				}).then(res => {
					if (res.code == 0) {
						if(this.$refs.uCode.canGetCode) {
							this.$u.toast('已发送')
							this.$refs.uCode.start()
						}
					}
				}).catch(_ => {
					this.$u.toast('发送失败')
				})
			},
			checkPhone() {
				return new Promise(async (resolve, reject) => {
					// 检查手机号
					if (!isMobile(this.form.newPhone)) {
						this.$u.toast('请检查手机号')
						resolve(false)
						return
					}
					
					// 检查是否已注册
					const hasRegister = await this.$http.post('/parent/get', {
						phone: this.form.newPhone
					}).then(res => {
						if (res.data.openId) {
							this.$u.toast('该手机号已被注册')
						}
						return !res.data.openId
					}).catch(_ => false)
					resolve(hasRegister)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.otherLogin {
		.loginBox {
			background: #fff;
			padding: 0 $uni-spacing-row-lg;
			margin-bottom: $uni-spacing-col-lg;
			.authCodeBtn {
				display: flex;
				flex-direction: row;
				.u-input {
					flex: 1;
				}
			}
		}
		.submit {
			width: 80%;
			margin: 0 auto;
		}
	}
</style>
